<template>
  <div class="app-container home">


    <div style="background-color: white;padding: 20px">

      <el-tag size="mini" effect="dark">{{ incidentTypeMsg}}</el-tag>

      <el-tag size="mini" style="margin-left: 20px">{{ incidentRootsMsg}}</el-tag>

      <div style="margin-top: 20px">{{ incidentTitle}}</div>

      <div style="font-size: 12px;color: #888888;margin-top:20px;">
        <span>发生时间：{{occurrenceTime}}</span>
        <span style="margin-left: 10px">发生地点：{{provinceMsg}}{{cityMsg}}</span>
        <span style="margin-left: 10px">涉事主体：{{incidentSubjectMsg}}</span>
      </div>
    </div>

    <div style="background-color: white;padding: 20px;margin-top: 20px">

      <el-divider content-position="left"> <div class="article-title" style="color: #409EFF">事发经过</div></el-divider>
      <div style="font-size: 14px;font-weight: bold">
        事件简介
      </div>
      <span style="font-size: 14px;">{{incidentConcise}}</span>
      <el-timeline style="margin-top: 20px">
        <el-timeline-item
          v-for="(activity, index) in incidentDetailsOfProcess"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.detailsTime">
          <span v-html="activity.details"></span>
        </el-timeline-item>
      </el-timeline>
      <el-divider content-position="left"><div class="article-title" style="color: #409EFF">处置失当</div></el-divider>

        <div v-for="(item,index) in incidentDetailsOfHandle" style="">
          <div class="article-title">{{index+1}}、{{item.detailsTitle}}</div>
          <div class="article-content" v-html="item.details" > </div>
        </div>


      <el-divider content-position="left"><div class="article-title" style="color: #409EFF">案例启示</div></el-divider>

      <div v-for="(item,index) in incidentDetailsOfInspire"  >
        <div class="article-title">{{item.detailsTitle}}</div>
        <div class="article-content" v-html="item.details" style=""> </div>
      </div>
    </div>


  </div>
</template>

<script>
  import {listDetails} from "@/api/system/details";

  export default {
    name: "",
    components: {},
    data() {
      return {
        incidentTitle: null,
        incidentConcise: null,
        incidentTypeMsg: null,
        incidentRootsMsg: null,
        incidentSubjectMsg: null,
        occurrenceTime: null,
        provinceMsg: null,
        cityMsg: null,
        // 遮罩层
        loading: true,
        detailList: [],
        incidentDetailsOfHandle: [],
        incidentDetailsOfProcess: [],
        incidentDetailsOfInspire: [],
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          incidentId: 0,
        }
      };
    },
    created() {
      this.id = this.$route.query.id
      this.incidentTitle = this.$route.query.incidentTitle
      this.incidentConcise = this.$route.query.incidentConcise
      this.incidentTypeMsg = this.$route.query.incidentTypeMsg
      this.incidentRootsMsg = this.$route.query.incidentRootsMsg
      this.incidentSubjectMsg = this.$route.query.incidentSubjectMsg
      this.occurrenceTime = this.$route.query.occurrenceTime
      this.provinceMsg = this.$route.query.provinceMsg
      this.cityMsg = this.$route.query.cityMsg
      this.listDetails()
    },
    methods: {
      listDetails() {
        this.loading = true;
        this.queryParams.incidentId = this.id
        listDetails(this.queryParams).then(response => {
          this.detailList = response.rows;
          this.detailList.forEach(item => {
            if (item.detailsType === 2) {
              this.incidentDetailsOfHandle.push(item)
            } else if (item.detailsType === 1) {
              if(this.incidentDetailsOfProcess.length==0){
                item.size = 'large'
                item.type = 'primary'
                item.icon = 'el-icon-video-camera'
                item.color = '#0bbd87'
              }
              this.incidentDetailsOfProcess.push(item)
            } else if (item.detailsType === 3) {
              this.incidentDetailsOfInspire.push(item)
            }
          })

          this.loading = false;
        });
      }

    }
  };
</script>


<style scoped lang="scss">
  .home {
    background-color: white;
  }
  .article-title {
    font-weight: bold;
    font-size: 16px;
    color: #1e1e1e
  }

  .article-content {
    text-indent: 35px;
    font-size: 14px;
    color: #303133;
  }
</style>
